<template>
  <div class="containter">
    <div class="box">
      <!-- 头像 -->
      <div class="avatar">
        <img src="@/assets/logo.png" alt="用户头像" />
      </div>
      <!-- 登录表单 -->
      <el-form ref="loginRef" :model="login" :rules="rules" label-width="0" class="form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="login.username" prefix-icon="el-icon-user"/>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="login.password" prefix-icon="el-icon-lock" :type="pwdShowType">
            <i @click="tabShow" slot="suffix" class="pointer">
              <icon :name="pwdShowType==='password'?'eye-open':'eye'" class="icon"></icon>
            </i>
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="submit">登陆</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validatePassword } from '@/utils/validate'

export default {
  data () {
    return {
      login: {
        username: 'zs',
        password: '123456'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '用户名长度在2-20字符间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在6-20字符间', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      pwdShowType: 'password'
    }
  },
  methods: {
    tabShow () {
      this.pwdShowType = this.pwdShowType === 'password' ? 'text' : 'password'
    },
    reset () {
      this.$refs.loginRef.resetFields()
    },
    submit () {
      this.$refs.loginRef.validate(async valid => {
        if (!valid) return
        const response = await this.$http.post('/api/login', this.login)
        if (response.status !== 200) return this.$message.error(`登陆失败,网络异常,错误码${response.status},错误信息${response.statusText}`)
        const source = response.data
        if (!source.success) return this.$message.error('登陆失败,用户名密码错误')
        window.sessionStorage.setItem('token', source.token)
        this.$message.success('登陆成功!')
        this.$router.push('/home')
      })
    }
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.containter {
  background-color: #2b4b6b;
  height: 100%;
}
.box {
  position: absolute;
  width: 450px;
  height: 300px;
  background-color: #eee;
  border-radius: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 130px;
    width: 130px;
    border: 1px solid #FFF;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #fff;
    background-color: #bcd;
    img{
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #ddd;
    }
  }
}
.form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 10%;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.icon {
  height: 100%;
  width: 15px;
  padding: 0 5px;
  vertical-align: baseline;
}
// .prefix {
//   input {
//     padding-left: 30px!important;
//   }
// }
// .prefix-icon {
//   height: 100%;
//   left: 5px;
//   width: 25px;
//   padding: 0 5px;
//   box-sizing: border-box;
//   position: absolute;
//   color: #C0C4CC;
//   .icon{
//     height: 100%;
//     width: 15px;
//     vertical-align: baseline;
//   }
// }
// .svg-container {
//   padding: 6px 5px 6px 15px;
//   color: 889aa4;
//   vertical-align: middle;
//   width: 30px;
//   display: inline-block;
// }
</style>
